<!doctype html>
<title>Interactive HTML sprite</title>

<style type="text/css">

#stage
{
  position: relative;
  display: block;
  width: 550px;
  height: 400px;
  border: 1px dashed black;
  overflow: hidden;
}

#cat
{
  position: absolute;
  width: 64px;
	height: 64px;
  background-image: url("cat.png");
  background-color: rgba(0, 0, 0, 0);
  
  /* Add some optional transitions to smooth the effect*/
  /*
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  */
  
}

button
{
  cursor: pointer;
}

</style>

<button id="up">up</button>
<button id="down">down</button>
<button id="right">right</button>
<button id="left">left</button>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="bigger">bigger</button>
<button id="smaller">smaller</button>
<button id="rotateRight">rotate right</button>
<button id="rotateLeft">rotate left</button>
<button id="moreTransparent">more transparent</button>
<button id="lessTransparent">less transparent</button>
<button id="shadowOn">shadow on</button>
<button id="shadowOff">shadow off</button>

<div id="stage">
  <div id="cat"></div>
</div>

<script src="requestAnimationFramePolyfill.js"></script>
<script type="text/javascript">

//--- The sprite object

var spriteObject =
{
  //A property to store a reference to the
  //sprite's HTML element
  element: undefined,
  
  //The x and y position of the sprite on the canvas
  //as well as its height
  x: 0,
  y: 0,
  width: 64,
  height: 64,
  
  //A property to tell us if the sprite is visible
  visible: true,
  
  //The sprite's rotation, in degrees
  rotation: 0,
  
  //The sprite's transparency
  alpha: 1,
  
  //The sprite's shadow
  //Note: This will only add a shadow to the HTML element, not the image.
  //If you need the exact shape of the sprite to have a shadow, create
  //the sprite image with a drop shadow using graphic design software.
  shadow: false
};

//--- The main program

//An array to store the game sprites
var sprites = [];

//Create the cat sprite
var cat = Object.create(spriteObject);

//Center it
cat.x = 243;
cat.y = 168;

//Get a reference to the cat HTML element and
//store it in the sprite's "element" property
cat.element = document.querySelector("#cat");

//Push the cat into the sprites array
sprites.push(cat);

var stage = document.querySelector("#stage");

//Add event listeners to the buttons

//Up button
var up = document.querySelector("#up");
up.addEventListener("mousedown", upHandler, false);

//Down button
var up = document.querySelector("#down");
down.addEventListener("mousedown", downHandler, false);

//Right button
var right = document.querySelector("#right");
right.addEventListener("mousedown", rightHandler, false);

//Left button
var left = document.querySelector("#left");
left.addEventListener("mousedown", leftHandler, false);

//Hide button
var hide = document.querySelector("#hide");
hide.addEventListener("mousedown", hideHandler, false);

//Show button
var hide = document.querySelector("#show");
show.addEventListener("mousedown", showHandler, false);

//Bigger button
var bigger = document.querySelector("#bigger");
bigger.addEventListener("mousedown", biggerHandler, false);

//Smaller button
var smaller = document.querySelector("#smaller");
smaller.addEventListener("mousedown", smallerHandler, false);

//Rotate right button
var rotateRight = document.querySelector("#rotateRight");
rotateRight.addEventListener("mousedown", rotateRightHandler, false);

//Rotate left button
var rotateLeft = document.querySelector("#rotateLeft");
rotateLeft.addEventListener("mousedown", rotateLeftHandler, false);

//More transparent button
var moreTransparent = document.querySelector("#moreTransparent");
moreTransparent.addEventListener("mousedown", moreTransparentHandler, false);

//Less transparent button
var lessTransparent = document.querySelector("#lessTransparent");
lessTransparent.addEventListener("mousedown", lessTransparentHandler, false);

//Shadow on button
var shadowOn = document.querySelector("#shadowOn");
shadowOn.addEventListener("mousedown", shadowOnHandler, false);

//Shadow off button
var shadowOff = document.querySelector("#shadowOff");
shadowOff.addEventListener("mousedown", shadowOffHandler, false);

//Start the animation loop
setInterval(render, 16);

function update()
{
  //The animation loop
  requestAnimationFrame(update, canvas);
  
  render();
}

//The buttons eventHandlers

//Up
function upHandler(event)
{
  cat.y -= 10;
}

//Down
function downHandler(event)
{
  cat.y += 10;
}

//Right
function rightHandler(event)
{
  cat.x += 10;
}

//Left
function leftHandler(event)
{
  cat.x -= 10;
}

//Hide
function hideHandler(event)
{
  cat.visible = false;
}

//Show
function showHandler(event)
{
  cat.visible = true;
}

//Bigger
function biggerHandler(event)
{
  cat.height += 10;
  cat.width += 10;
  cat.x -= 5;
  cat.y -= 5;
}

//Smaller
function smallerHandler(event)
{
  cat.height -= 10;
  cat.width -= 10;
  cat.x += 5;
  cat.y += 5;
}

//Rotate right
function rotateRightHandler(event)
{
  cat.rotation += 10;
}

//Rotate left
function rotateLeftHandler(event)
{
  cat.rotation -= 10;
}

//More transparent
function moreTransparentHandler(event)
{
  if(cat.alpha > 0)
  {
    cat.alpha -= 0.1;
  }
}

//Less transparent
function lessTransparentHandler(event)
{
  if(cat.alpha < 1)
  {
    cat.alpha += 0.1;
  }
}

//Shadow on
function shadowOnHandler(event)
{
  cat.shadow = true;
}

//Shadow off
function shadowOffHandler(event)
{
  cat.shadow = false;
}
function render(event)
{ 
  //Loop through all the sprites.
  //(There's only one in this basic example)
  for(var i = 0; i < sprites.length; i++)
  {
  
    //Get a referene to the current sprite
    var sprite = sprites[i];
    
	  if(sprite.visible)
	  {
	    //Display the sprite if it's visible
	    sprite.element.style.display = "block";
	    
	    //The sprite's x and y position
	    sprite.element.style.top = sprite.y + "px";
	    sprite.element.style.left = sprite.x + "px";
	  
	    //The sprite's rotation
	    //This uses the CSS transform property
	    sprite.element.style.webkitTransform = "rotate(" + sprite.rotation + "deg)";
	    sprite.element.style.MozTransform = "rotate(" + sprite.rotation + "deg)";
	    sprite.element.style.transform = "rotate(" + sprite.rotation + "deg)";
	    
	    //The sprite's height and width
	    sprite.element.style.width = sprite.width + "px";
	    sprite.element.style.height = sprite.height + "px";
	    
	    //Make the div element's background image match
	    //the sprite's dimensions
	    sprite.element.style.backgroundSize = sprite.width + "px" + " " + sprite.height + "px"; 
	    
	    //The sprite's transparency
	    sprite.element.style.opacity = sprite.alpha;
	    
	    //The shadow
	    if(sprite.shadow)
	    {
	      sprite.element.style.webkitBoxShadow = "5px 5px 5px rgba(100, 100, 100, 0.5)";
      	sprite.element.style.mozBoxShadow = "5px 5px 5px rgba(100, 100, 100, 0.5)";
      	sprite.element.style.boxShadow = "5px 5px 5px rgba(100, 100, 100, 0.5)";
	    }
	    else
	    {
	      sprite.element.style.webkitBoxShadow = "0px 0px 0px rgba(0, 0, 0, 0)";
      	sprite.element.style.mozBoxShadow = "0px 0px 0px rgba(0, 0, 0, 0)";
      	sprite.element.style.boxShadow = "0px 0px 0px rgba(0, 0, 0, 0)";
	    }
	  }
	  else
	  {
	    //Hide the sprite if it's not visible
	    sprite.element.style.display = "none";
	  }
	}
}
</script>
